import MainLayout from '@/components/layout';
import withAuth from '@/components/withAuth';
import { addUser,getUserList } from '@/pages/api/demo';
import { Form, Input, InputNumber, Button, message } from 'antd/lib/index';
import { useState, useEffect } from 'react';

function Users() {
  const [form] = Form.useForm();
  const [userList, setUserList] = useState([]);
  const onFinish = async (values: any) => {
    try {
      // 这里添加提交表单的API调用
      const res = await addUser(values);
      console.log('提交的表单数据:', res);
      message.success('用户添加成功！');
      form.resetFields();
    } catch (error) {
      message.error('添加用户失败，请重试！');
    }
  };
  const fetchUserList = async () => {
    const res = await getUserList({});
    console.log("🚀 ~ getUserList ~ res:", res)
    setUserList(res.data);
  };
  useEffect(() => {
    fetchUserList();
  }, []);
  return (
    <MainLayout>
      <h1>用户管理</h1>
      <Form
        form={form}
        name="userForm"
        onFinish={onFinish}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600, marginTop: 24 }}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: '请输入用户名！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: '请输入密码！' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label="年龄"
          name="age"
          rules={[{ required: true, message: '请输入年龄！' }]}
        >
          <InputNumber min={1} max={120} />
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[
            { required: true, message: '请输入邮箱！' },
            { type: 'email', message: '请输入有效的邮箱地址！' }
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
          <Button type="primary" htmlType="submit">
            添加用户
          </Button>
        </Form.Item>
      </Form>
    </MainLayout>
  );
}

// export default withAuth(Users, ['admin']);
export default Users;
